<template>
	<div class="dadatil">
		<audio id='audioPlay1' :src='dat_music.audio_url' hidden='true' style="position: absolute;z-index: -1;top: 0;left: 0;opacity: 0;"></audio>
		<embed id="embedPlay1" :src="dat_music.audio_url" autostart="true" hidden="true" loop="false" style="position: absolute;z-index: -1;top: 0;left: 0;opacity: 0;"></embed>
		<div class="dtdatil_title flex align_center" v-show="tabI!=2">
			<i class="el-icon-arrow-left" style="float: left;margin-left: 4%;font-size: 1.8rem;" @click="fh"></i>
			<span class="flex1">发帖</span>
			<span style="float: right;font-size: 1.5rem;margin-right: 4%;color: #b042ff;" @click="fabu">发布</span>
		</div>
		<div style="padding: 0 4%;" v-show="tabI!=2">
			<textarea placeholder="说点什么吧" class="dtdatil_text" v-model="content"></textarea>
			<div @click="yybftrue" style="width: 100%;background: #f5f5f5;padding: 0;border: 0;margin-bottom: 1rem;" class="dtdatil_yycontent flex align_center" v-if="dat_music.image_url" >
				<div class="xiaoxi2_img">
	     			<img :src="dat_music.image_url"  @error='(e)=>{e.target.src="../../../../static/img/images/dataerror3.png"}' />
	     			<div class="yybf flex align_center justify_cen">
						<span style="border: 1px solid #fff;border-radius: 100px;">
							<i :class="yybfTrue?'autobf':'el-icon-caret-right'" ></i>
						</span>	
					</div>
	     		</div>
	     		
				<div class="dtdatil_yyctext flex1 flex_flow flex">
					<span>{{dat_music.song_name}}</span>
					<span>{{dat_music.singer_name}}</span>
				</div>
			</div>
			<div class="dtdatil_dw" @click="addTress">
				<i class="el-icon-location"></i> {{address}}
			</div>
			<div class="dtdatil_tab clear2">
				<div class="dtdatil_tabd" @click="tabI=0">
					<img :src="tabI!=0?'../../../../static/img/images/dt_bq1.png':'../../../../static/img/images/dt_bq2.png'" />
				</div>
				<div class="dtdatil_tabd" @click="tabI=1">
					<img :src="tabI!=1?'../../../../static/img/images/dt_tp1.png':'../../../../static/img/images/dt_tp2.png'" />
				</div>
				<div class="dtdatil_tabd" @click="tabI=2">
					<img :src="tabI!=2?'../../../../static/img/images/dt_yy1.png':'../../../../static/img/images/dt_yy2.png'" />
				</div>

			</div>
			<div style="margin: 0.9rem 0;">
				<div style="width: 100%;height: 180px;" v-show="tabI==0">
					<mt-swipe :auto="0">
						<mt-swipe-item v-for='(data,key) in bqlistLength' :key='key'>
							<div class="biaoqingdiv2" @click='clickbq($event)' v-for="(data2,key2) in bqlist" v-if='key2<((bodyWidth-1)*(key-1+2))&&key2>((bodyWidth-1)*key-1)'>
								<img :id="data2.name" :src="data2.url">
							</div>
							<div style="width: 24px;height: 24px;font-size: 18px;" class="biaoqingdiv2" @click='clickbqsc()'>
								<img src="../../../../static/img/images/shanchu2.png" />
							</div>
						</mt-swipe-item>
					</mt-swipe>

				</div>
				<div style="width: 100%;" class="dtdatil_img clear2" v-show="tabI==1">
					<el-upload
					  :action="defines.imgUpload"
					  list-type="picture-card"
					  :on-success="handlePictureCardPreview"
					  :on-remove="handleRemove"
					  :data='aaa'
					  multiple
					  :limit='9'
					  :before-upload='beforeupload'
					  name='img_file'
					  :class='dat_img.length<9?"":"dat_imghide"'>
					  <i class="el-icon-plus" ></i>
					</el-upload>
					
					<!--<div class="datimg" v-for="(data,key) in dat_img" @click="closeImg(key)">
						<img :src="data.img_url_s" />
						<img src="../../../../static/img/images/dt_delete.png"  style="position: absolute;top: 0;right: 0;width: 20px;height: 20px;"/>
					</div>
					<label class="dtdatil_plus " for="up_img">
						<i class="el-icon-plus"></i>
					</label>
					<input multiple type="file" id="up_img" style="display: none;" @change="updata_img($event)" />
					<div style="clear: both;"></div>-->
					<p class="dtdatil_imgp">您还能上传{{9-dat_img.length}}张照片</p>
				</div>
				
				<div class="dtdatil_ts">
					<p class="dtdatil_tsp1">温馨提示</p>
					<p class="dtdatil_tsp2">1、禁止发布微商等其他广告内容；</p>
					<p class="dtdatil_tsp2">2、以防您的财产损失，请勿发布微信号或手机号；</p>
					<p class="dtdatil_tsp2">一旦用户违规，将禁言或直接封号处罚 </p>
				</div>
			</div>
		</div>
		<div class="dtdatil_yy" v-show="tabI==2">
			<div class="dtdatil_yytitle clear2 flex align_center">
				<div class="dtdatil_yytitlel flex1 flex align_center" style="overflow: hidden;">
					<i class="el-icon-search"></i>
					<input style="width: 100%;" placeholder="搜索歌曲、艺人、唱片" type="text" @keyup.enter='SearchData' v-model="seachMusic" />
				</div>
				<div class="dtdatil_yytitler" @click="tabI=-1">
					取消
				</div>
			</div>
			<div style="text-align: center;font-size: 1.4rem;padding: 1rem 0;color: #505050;" v-if="musicList.length==0">
				请搜索歌曲
			</div>
			<div class="dtdatil_yycontent flex align_center" v-else v-for='(data,key) in musicList' @click.stop="yybftrue2(data.audio_url,key)">
				<div class="xiaoxi2_img">
	     			<img :src="data.image_url"  @error='(e)=>{e.target.src="../../../../static/img/images/dataerror3.png"}' />
	     			<div class="yybf flex align_center justify_cen">
						<span style="border: 1px solid #fff;border-radius: 100px;">
							<i :class="data.yybfTrue?'autobf':'el-icon-caret-right'" ></i>
						</span>
					</div>
	     		</div>
				<div class="dtdatil_yyctext flex1 flex_flow flex">
					<span>{{data.song_name}}</span>
					<span>{{data.singer_name}}</span>
				</div>
				<span class="dtdatil_yycbutton" @click.stop="musicChose(data)">选择</span>
			</div>
		</div>
	</div>
</template>
  
<script>
	let emotions = {
        "0": ["[微笑]", "../../../../static/web/img/mmbq/001.png"],
        "1": ["[偷笑]", "../../../../static/web/img/mmbq/002.png"],
        "2": ["[大哭]", "../../../../static/web/img/mmbq/003.png"],
 	"3": ["[发怒]", "../../../../static/web/img/mmbq/003.png"],
        "4": ["[憨笑]", "../../../../static/web/img/mmbq/004.png"],
        "5": ["[流泪]", "../../../../static/web/img/mmbq/005.png"],
        "6": ["[流汗]", "../../../../static/web/img/mmbq/006.png"],
        "7": ["[呲牙]", "../../../../static/web/img/mmbq/007.png"],
        "8": ["[晕]", "../../../../static/web/img/mmbq/009.png"],
        "9": ["[傲慢]", "../../../../static/web/img/mmbq/010.png"],
        "10": ["[色]", "../../../../static/web/img/mmbq/011.png"],
        "11": ["[快哭了]", "../../../../static/web/img/mmbq/012.png"],
        "12": ["[亲亲]", "../../../../static/web/img/mmbq/013.png"],
        "13": ["[抓狂]", "../../../../static/web/img/mmbq/014.png"],
        "14": ["[抠鼻]", "../../../../static/web/img/mmbq/015.png"],
        "15": ["[撇嘴]", "../../../../static/web/img/mmbq/016.png"],
        "16": ["[鼓掌]", "../../../../static/web/img/mmbq/017.png"],
        "17": ["[坏笑]", "../../../../static/web/img/mmbq/018.png"],
        "18": ["[惊恐]", "../../../../static/web/img/mmbq/019.png"],
        "19": ["[愤怒]", "../../../../static/web/img/mmbq/020.png"],
        "20": ["[委屈]", "../../../../static/web/img/mmbq/021.png"],
        "21": ["[睡觉]", "../../../../static/web/img/mmbq/022.png"],
        "22": ["[困]", "../../../../static/web/img/mmbq/023.png"],
        "23": ["[哀]", "../../../../static/web/img/mmbq/024.png"],
        "24": ["[疑问]", "../../../../static/web/img/mmbq/025.png"],
        "25": ["[调皮]", "../../../../static/web/img/mmbq/026.png"],
        "26": ["[敲打]", "../../../../static/web/img/mmbq/027.png"],
        "27": ["[吐]", "../../../../static/web/img/mmbq/028.png"],
        "28": ["[害羞]", "../../../../static/web/img/mmbq/029.png"],
        "29": ["[闭嘴]", "../../../../static/web/img/mmbq/030.png"],
        "30": ["[阴险]", "../../../../static/web/img/mmbq/031.png"],
        "31": ["[尴尬]", "../../../../static/web/img/mmbq/032.png"],
        "32": ["[右哼哼]", "../../../../static/web/img/mmbq/033.png"],
        "33": ["[左哼哼]", "../../../../static/web/img/mmbq/034.png"],
        "34": ["[嘘]", "../../../../static/web/img/mmbq/035.png"],
        "35": ["[发呆]", "../../../../static/web/img/mmbq/036.png"],
        "36": ["[得意]", "../../../../static/web/img/mmbq/037.png"],
        "37": ["[白眼]", "../../../../static/web/img/mmbq/038.png"],
        "38": ["[糗大了]", "../../../../static/web/img/mmbq/039.png"],
        "39": ["[酷]", "../../../../static/web/img/mmbq/040.png"],
        "40": ["[哈欠]", "../../../../static/web/img/mmbq/041.png"],
        "41": ["[谩骂]", "../../../../static/web/img/mmbq/042.png"],
        "42": ["[可怜]", "../../../../static/web/img/mmbq/043.png"],
        "43": ["[惊吓]", "../../../../static/web/img/mmbq/044.png"],
        "44": ["[难过]", "../../../../static/web/img/mmbq/045.png"],
        "45": ["[奋斗]", "../../../../static/web/img/mmbq/046.png"],
        "46": ["[炸弹]", "../../../../static/web/img/mmbq/047.png"],
        "47": ["[咖啡]", "../../../../static/web/img/mmbq/048.png"],
        "48": ["[礼品]", "../../../../static/web/img/mmbq/049.png"],
        "49": ["[玫瑰]", "../../../../static/web/img/mmbq/050.png"],
        "50": ["[凋谢]", "../../../../static/web/img/mmbq/051.png"],
	"51": ["[愉快]", "../../../../static/web/img/mmbq/052.png"],
        "52": ["[爱心]", "../../../../static/web/img/mmbq/053.png"],
        "53": ["[心碎]", "../../../../static/web/img/mmbq/054.png"],
        "54": ["[示爱]", "../../../../static/web/img/mmbq/055.png"],
        "55": ["[太阳]", "../../../../static/web/img/mmbq/056.png"],
        "56": ["[月亮]", "../../../../static/web/img/mmbq/057.png"],
        "57": ["[蛋糕]", "../../../../static/web/img/mmbq/058.png"],
        "58": ["[闪电]", "../../../../static/web/img/mmbq/059.png"],
        "59": ["[OK]", "../../../../static/web/img/mmbq/060.png"],
        "60": ["[勾引]", "../../../../static/web/img/mmbq/061.png"],
        "61": ["[强]", "../../../../static/web/img/mmbq/062.png"],
        "62": ["[弱]", "../../../../static/web/img/mmbq/063.png"],
	"63": ["[胜利]", "../../../../static/web/img/mmbq/064.png"],
 	"64": ["[抱拳]", "../../../../static/web/img/mmbq/065.png"],
	"65": ["[握手]", "../../../../static/web/img/mmbq/066.png"],
	"66": ["[刀]", "../../../../static/web/img/mmbq/067.png"],
	"67": ["[惊讶]", "../../../../static/web/img/mmbq/068.png"],
	"68": ["[篮球]", "../../../../static/web/img/mmbq/069.png"],
	"69": ["[足球]", "../../../../static/web/img/mmbq/070.png"],
 	"70": ["[乒乓]", "../../../../static/web/img/mmbq/071.png"],
	"71": ["[米饭]", "../../../../static/web/img/mmbq/072.png"],
	"72": ["[西瓜]", "../../../../static/web/img/mmbq/073.png"],
 	"73": ["[便便]", "../../../../static/web/img/mmbq/074.png"],
 	"74": ["[冷汗]", "../../../../static/web/img/mmbq/075.png"],
	"75": ["[再见]", "../../../../static/web/img/mmbq/076.png"],
	"76": ["[饥饿]", "../../../../static/web/img/mmbq/077.png"],
	"77": ["[擦汗]", "../../../../static/web/img/mmbq/078.png"],
	"78": ["[悠闲]", "../../../../static/web/img/mmbq/079.png"],
	"79": ["[疯了]", "../../../../static/web/img/mmbq/080.png"],
 	"80": ["[骷髅]", "../../../../static/web/img/mmbq/081.png"],
 	"81": ["[菜刀]", "../../../../static/web/img/mmbq/082.png"],
 	"82": ["[瓢虫]", "../../../../static/web/img/mmbq/083.png"],
 	"83": ["[拥抱]", "../../../../static/web/img/mmbq/084.png"],
 	"84": ["[拳头]", "../../../../static/web/img/mmbq/085.png"],
 	"85": ["[差劲]", "../../../../static/web/img/mmbq/086.png"],
	"86": ["[爱你]", "../../../../static/web/img/mmbq/087.png"],
	"87": ["[不]", "../../../../static/web/img/mmbq/088.png"],

    };
	import { MessageBox } from 'mint-ui';
	import { Toast } from 'mint-ui';
	export default {
		data: function() {
			return {
				aaa:{
					'uid':window.uid	
				},
				dialogImageUrl: '',
        		dialogVisible: false,
				bqlist:[],
				bqlistLength:0,
				bodyWidth:0,
				tabI:-1,
				seachMusic:'',
				musicList:[],
				dat_music:[],
				yybfTrue:false,
				content:'',
				dat_img:[],
				address:'开启定位',
				addressTrue:false,
				
			}
		},
		mounted() {
			this.bqurl();
		},
		methods: {
			addTress(){
				if(this.addressTrue){
					this.addressTrue=false;
					this.address='开启定位';
				}
				else{
					this.addressTrue=true;
					this.address=window.addresslkm;
				}
			},
			clickbqsc(){
				let html_data = this.content;
				html_data=html_data.substring(0,html_data.lastIndexOf('['))
				this.content=html_data;
			},
			beforeupload(file){
				console.log(file);
				if(this.dat_img.length==9){
					Toast('最多上传9张图片');
					return false;
				}
			},
			handleRemove(file, fileList) {
				this.dat_img=[];
				for(let i in fileList){
					this.dat_img.push(fileList[i].response.data.img_list[0])
				}
		        
		      },
		      handlePictureCardPreview(response, file, fileList) {
		      	this.dat_img.push(file.response.data.img_list[0])
		        
		      },
			fabu(){
				let model={};
				if(this.addressTrue){
					model={
						'uid':window.uid,
						'address':this.address,
						'content':this.content,
						'dat_img':this.dat_img,
						'dat_music':this.dat_music,
					}
				}
				else{
					model={
						'uid':window.uid,
						'content':this.content,
						'dat_img':this.dat_img,
						'dat_music':this.dat_music,
					}
				}
				
				this.$http.post(this.defines.release,model, {
						emulateJSON: true
					})
					.then(
						(data) => {
							if(data.data.success){
								Toast('发布成功');
								this.$router.push({
									path: '/dongtai',
									query:{
										'qidong':true
									}
								})
								
							}
							else{
								Toast(data.data.errmsg);
							}
						},
						(error) => {
							console.log(error);
						}
					);
			},
			fh(){
        		window.history.go(-1);
        	},
			bqurl(){
				let body_width=(window.screen.width*0.92-20)/44;
				console.log(body_width)
				body_width=parseInt(body_width)*3;
				this.bodyWidth=body_width;
				let html_list =[];
				for(let i in emotions){
					html_list.push({
						'name':emotions[i][0],
						'url':emotions[i][1]
					})
				}
				this.bqlist=html_list
				let Length=0;
				Length=html_list.length/body_width;
				this.bqlistLength=Math.ceil(Length)
			},
			closeImg(key){
				MessageBox.confirm('确定删除该图片?').then(action => {
					this.dat_img.splice(key, 1);
				});
			},
			updata_img(){
				if(this.dat_img.length==9){
					Toast('最多上传9张图片');
					return false;
				}
				let fileObj = document.getElementById("up_img").files[0]; // 获取文件对象
				
	            let form = new FormData();
	            form.append("img_file", fileObj); 
	            form.append("uid", window.uid);
	            this.$http.post(this.defines.imgUpload,form, {
						emulateJSON: true
					})
					.then(
						(data) => {
							this.dat_img.push(data.data.data.img_list[0])
						},
						(error) => {
							console.log(error);
						}
					);
	            
			},
			yybftrue2(url,key){
				let borswer = window.navigator.userAgent.toLowerCase();  
				if ( borswer.indexOf( "ie" ) >= 0 )  
		            {  
		                let embed = document.getElementById( "embedPlay");  
		                embed.volume = 100;  
		                embed.pause(); 
		            } else  
		            {  
		  				let auto = document.getElementById('audioPlay');
		                auto.pause();
		            }  
				
				if(!this.musicList[key].yybfTrue){
					
					for(let i in this.musicList){
						if(this.musicList[i]){
							if(key==i){
								this.$set(this.musicList[i],'yybfTrue',true)
							}
							else{
								this.$set(this.musicList[i],'yybfTrue',false)
							}
						}
					}
					
					setTimeout(()=>{
						if ( borswer.indexOf( "ie" ) >= 0 )  
			            {  
			                var embed = document.getElementById( "embedPlay1" );  ;  
			               embed.src=url;
			               embed.volume = 100;
			                embed.play();  
			            } else  
			            {  
			  				let auto = document.getElementById('audioPlay1');
			                auto.src=url;
			                auto.play();
			            }  
					},0)
					
				}
				else{
					this.yybfTrue=false;
					this.$set(this.musicList[key],'yybfTrue',false)
					let borswer = window.navigator.userAgent.toLowerCase();  
					if ( borswer.indexOf( "ie" ) >= 0 )  
			            {  
			                var embed = document.getElementById( "embedPlay1" );  ;  
			                embed.volume = 100;  
			                embed.pause(); 
			            } else  
			            {  
			  				let auto = document.getElementById('audioPlay1');
			                auto.pause();
			            }  
				}
				
			},
			yybftrue(){
				this.yybfTrue=!this.yybfTrue;
				let borswer = window.navigator.userAgent.toLowerCase();  
				if ( borswer.indexOf( "ie" ) >= 0 )  
		            {  
		                let embed = document.getElementById( "embedPlay");  
		                embed.volume = 100;  
		                embed.pause(); 
		            } else  
		            {  
		  				let auto = document.getElementById('audioPlay');
		                auto.pause();
		            }  
				
				if(this.yybfTrue){
					if ( borswer.indexOf( "ie" ) >= 0 )  
			            {  
			                var embed = document.getElementById( "embedPlay1");
			                embed.volume = 100;  
			                embed.play();  
			            } else  
			            {  
			  				let auto = document.getElementById('audioPlay1');
			                auto.play();  
			            }  
					
				}
				else{
					if ( borswer.indexOf( "ie" ) >= 0 )  
			            {  
			                var embed = document.getElementById( "embedPlay1" );  ;  
			                embed.volume = 100;  
			                embed.pause(); 
			            } else  
			            {  
			  				let auto = document.getElementById('audioPlay1');
			                auto.pause();
			            }  
				}
				
			},
			clickbq(event) {
				this.content=this.content+event.target.children[0].id
			},
			musicChose(data){
				this.dat_music=data;
				this.tabI=-1;
			},
			SearchData(){
				this.$http.post(this.defines.getMusicList, {
						uid: window.uid,
						search_val:this.seachMusic,
					}, {
						emulateJSON: true
					})
					.then(
						(data) => {
							console.log(data)
							this.musicList=data.data.data.music_list;
						},
						(error) => {
							console.log(error);
						}
					);
				
			}

		}
	}
</script>

<style scoped>
	.dtdatil_title {
		text-align: center;
		color: #1c1c1c;
		font-size: 1.6rem;
		line-height: 1.6rem;
		padding: 3% 0;
		border-bottom: 1px solid #e5e5e5;
	}
	
	.dtdatil_text {
		border: 0;
		height: 7rem;
		width: 100%;
		padding: 1rem 0;
		font-size: 1.5rem;
	}
	
	input:focus,
	textarea:focus {
		outline: none;
	}
	
	.dtdatil_text::-webkit-input-placeholder {
		/* WebKit browsers */
		color: #d1d1d1;
	}
	
	.dtdatil_text:-moz-placeholder {
		/* Mozilla Firefox 4 to 18 */
		color: #d1d1d1;
	}
	
	.dtdatil_text::-moz-placeholder {
		/* Mozilla Firefox 19+ */
		color: #d1d1d1;
	}
	
	.dtdatil_text:-ms-input-placeholder {
		/* Internet Explorer 10+ */
		color: #999;
	}
	
	.dtdatil_dw {
		font-size: 1.5rem;
		color: #505050;
	}
	
	.dtdatil_dw i {
		color: #4297ff;
		font-size: 1.6rem;
	}
	
	.dtdatil_tab {
		margin-top: 0.5rem;
		padding: 0.6rem 0;
		border-bottom: 1px solid #eeeeec;
		border-top: 1px solid #eeeeec;
		width: 100%;
	}
	
	.dtdatil_tabd {
		width: 1.9rem;
		margin-right: 1.7rem;
		float: left;
	}
	
	.dtdatil_tabd img {
		width: 100%;
	}
	
	.biaoqingdiv2 {
		margin: 5px 10px;
		float: left;
		
	}
	
	.biaoqingdiv2 img {
		width: 24px;
		height: 24px;
	}
	.dtdatil_plus{
		float: left;
		border: 2px solid #d1d1d1;
		width: 80px;
		height: 80px;
		text-align: center;
		line-height: 80px;
		
	}
	.dtdatil_plus i{
		font-size: 60px;
		line-height: 80px;
		color: #d1d1d1;
		
	}
	.dtdatil_imgp{
		font-size: 1.5rem;
		color: #4297ff;
		text-align: center;
		padding: 1rem 0;
	}
	.dtdatil_ts{
		width: 100%;
	}
	.dtdatil_tsp1{
		color: #505050;
		font-size: 1.5rem;
		
	}
	.dtdatil_tsp2{
		font-size: 1.2rem;
		color: #8a8a8a;
		
	}
	.dtdatil_yy{
		width: 100%;
		margin-bottom: 4rem;
		
	}
	.dtdatil_yytitle{
		width: 92%;
		padding: 1rem 4%;
		border-bottom: 1px solid #e5e5e5;
	}
	.dtdatil_yytitlel{
		background: #e7e9ee;
		height: 2.5rem;
		border-radius: 0.4rem;
		padding: 0 1rem;
		box-sizing: border-box;
		font-size: 1.6rem;
		color: #afafaf;
	}
	.dtdatil_yytitlel input{
		border: 0;
		font-size: 1.3rem;
		color: #4297ff;
		background: transparent;
	}
	.dtdatil_yytitlel input::-webkit-input-placeholder {
		/* WebKit browsers */
		color: #afafaf;
	}
	
	.dtdatil_yytitlel input:-moz-placeholder {
		/* Mozilla Firefox 4 to 18 */
		color: #afafaf;
	}
	
	.dtdatil_yytitlel input::-moz-placeholder {
		/* Mozilla Firefox 19+ */
		color: #afafaf;
	}
	
	.dtdatil_yytitlel input:-ms-input-placeholder {
		/* Internet Explorer 10+ */
		color: #afafaf;
	}
	.dtdatil_yytitlel i{
		margin-right: 0.5rem;
	}
	.dtdatil_yytitler{
		font-size: 1.4rem;
		color: #8f8f8f;
		padding: 0 0  0 1rem;
	}
	.dtdatil_yycontent{
		width: 94%;
		padding: 1rem 3%;
		border-bottom: 1px solid #e5e5e5;
	}
	
	.xiaoxi2_img{
    	width: 5rem;
    	height: 5rem;
    	margin-right: 1rem;
    	position: relative;
    	
    }
    .xiaoxi2_img img{
    	width: 5rem;
    	height: 5rem;
    	object-fit:cover;
    	display: block;
    }
	.dtdatil_yyctext span{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.dtdatil_yyctext span:nth-child(1){
		font-size: 1.5rem;
		color: #505050;
	}
	.dtdatil_yyctext span:nth-child(2){
		font-size: 1.3rem;
		color: #8a8a8a;
	}
	.dtdatil_yycbutton{
		font-size: 1.3rem;
		padding: 0.2rem 0.6rem;
		border: 1px solid #b042ff;
		color: #b042ff;
		margin-left: 1.5rem;
		border-radius: 0.4rem;
		
	}
	.yybf{
		width: 5rem;
		height: 5rem;
		background: rgba(0,0,0,0.3);
		text-align: center;
		position: absolute;
		left: 0;
		top: 0;
		color: #fff;
	}
	.yybf .el-icon-caret-right{
		font-size: 3rem;
		border-radius: 100px;
		display: inline-block;
		width: 32px;
		height: 32px;
	}
	.autobf{
		border-right: 5px solid #fff;
		border-left: 5px solid #fff;
		box-sizing: border-box;
		display: block;
		width: 16px;
		height: 16px;
		margin: 8px;
	}
	.datimg{
		width: 80px;
		height: 80px;
		float: left;
		margin-right: 5px;
		margin-bottom: 5px;
		position: relative;
	}
	.datimg img{
		display: block;
		width: 80px;
		height: 80px;
		object-fit:cover ;
	}
</style>
<style>
	.mint-swipe-indicator.is-active {
		background: #007aff !important;
		opacity: 1 !important;
	}
	.dadatil .el-upload--picture-card{
		width: 80px;
		height: 80px;
		line-height:90px;
	}
	.dadatil .el-upload-list--picture-card .el-upload-list__item{
		width: 80px;
		height: 80px;
	}
	.dadatil .el-progress-circle{
		width: 70px !important;
		height: 70px !important;
	}
	.dadatil .el-upload-list--picture-card .el-progress{
		width: 70px !important;
	}
	.el-upload-list--picture-card .el-upload-list__item-thumbnail{
		object-fit: cover;
	}
	.dtdatil_img .el-icon-delete{
		display: block !important;	
	    text-align: right;
	    color: #fff;
	    font-size: 12px;
	    margin-top: 4px;
	}
	.dtdatil_img .el-upload-list__item-delete{
		display: block !important;
	}
	.dtdatil_img .el-upload-list__item-actions{
		opacity: 1 !important;
		background: transparent;
	}
	.dtdatil_img .el-icon-check{
		display: none !important;
	}
	.dat_imghide .el-upload--picture-card{
		display: none !important;
	}
</style>